<template>
  <div class="env-info">
    <div class="hum-temp">
      <div class="hum-temp-temp">
        <div>温度{{ tempHum.tempUnit }}</div>
        <img src="@/assets/images/home/temp.png" alt="" />
        <div>{{ tempHum.temperature.toFixed(2) }}</div>
      </div>
      <!-- 湿度 -->
      <div class="hum-temp-hum">
        <div>湿度{{ tempHum.humidityUnit }}</div>
        <img src="@/assets/images/home/hump.png" alt="" />
        <div>{{ tempHum.humidity.toFixed(2) }}</div>
      </div>
    </div>
    <!-- 右 -->
    <div class="env-list scroll-hidden">
      <div v-for="(item, index) in envInfoList" :key="index">
        <img src="@/assets/images/home/env-square.png" alt="" />
        <span class="item-name" style="display: inline-block"
          >{{ item.name }}：</span
        >
        <span
          class="item-value"
          style="display: inline-block; padding-right: 10px"
        >
          {{ item.value }}</span
        >&nbsp;&nbsp;
        <span class="item-unit" style="display: inline-block">{{
          item.unit
        }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {
  API_newTempInfo, //温度、湿度信息
} from "@/api/robot/monitor";
export default {
  props: {},
  data() {
    return {
      tempHum: {}, //温湿度数据
      envInfoList: [],
      humTempList: [],
    };
  },
  created() {
    this.getHumTempInfo();
  },
  methods: {
    /**获取温度湿度宫格信息 */
    getHumTempInfo() {
      API_newTempInfo().then((res) => {
        if (res.code == 200 && res.data) {
          // 温度
          this.tempHum = Object.assign({}, JSON.parse(res.data.tempHum));
          // 湿度
          //过滤数组
          let env = [];
          env = JSON.parse(res.data.env).map((item) => {
            if (item.symbol == "smog") {
              return {
                name: item.name,
                value: item.value == 0 ? "无" : "有",
                isShow: true,
              };
            }
            return {
              name: item.name,
              value: +Number(item.value).toFixed(1),
              unit: item.unit,
              isShow: true,
            };
          });
          this.envInfoList = [...env];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.env-info {
  display: flex;
  // justify-content: space-between;
  padding: 16px;
  box-sizing: border-box;
  background: url("../../../../assets/images/home/grid-bgo.png") no-repeat
    center center;
  background-size: 100% 100%;
}
.hum-temp {
  // 温度
  &-temp,
  &-hum {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 66px;
    height: 71px;
    background: url("../../../../assets/images/home/humtemp.png") no-repeat
      center center;
    background-size: 100% 100%;
    div:nth-child(1) {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #a6acb1;
    }
    img {
      display: flex;
      width: 20px;
      height: 20px;
      margin: 6px 0;
    }
    div:nth-child(2) {
      font-size: 14px;
      font-family: Helvetica;
      color: #ffffff;
      line-height: 12px;
    }
  }
  &-temp {
    margin-bottom: 10px;
  }
  // 湿度
  &-hum {
  }
}
.env-list {
  div {
    line-height: 26px;
  }
  margin-left: 14px;
  img {
    width: 6px;
    height: 6px;
    vertical-align: middle;
    margin-right: 3px;
  }
  .item-name {
    width: 80px;
    color: #a6acb1;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
  }
  .item-value {
    width: 20px;
    color: #ffffff;
    font-size: 14px;
    font-family: Helvetica;
  }
  .item-unit {
    color: #a6acb1;
    display: inline-block;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
}
.scroll-hidden {
  width: 100%;
  height: 165px;
  overflow: auto;
}
</style>
